<template>
	<div>
		<el-select class="input-with-select" @change="change" v-model="carId" clearable filterable remote reserve-keyword placeholder="输入车牌号查询" :remote-method="remoteMethod" :loading="loading">
			<el-option v-for="item in options4" :key="item.value" :label="item.label" :value="item.value">
			</el-option>
		</el-select>
	</div>
</template>

<script>
	export default {
		name: 'carInput',
		props: {
			value: {
				type: String,
				default: ''
			}
		},
		mounted() {
			// 远程获取车辆车牌号列表
			this.$http.get(
				process.env.JXH_API_HOST +
				"api/cars/" +
				session.get(process.env.SESSION_KEY_LICENSEINFO).companyId,
				d => {
					if(d.resultCode == 0) {
						this.list = d.record.map(item => {
							return {
								value: item.carId,
								label: item.plateNumber
							};
						});
					} else {
						layer.msg(d.msg);
					}
				}
			);
		},
		data() {
			return {
				list: [],
				carId: '',
				options4: [],
				loading: false
			};
		},
		watch:{
			value(val){
				if(val == ''){
					this.carId = val;
					this.options4 = [];
				}
			}
		},
		computed: {
			carInfor() {
				let _tmp = this.options4.filter(e => {
					return e.value == this.carId;
				});
				if(_tmp.length > 0) {
					return {
						carId: _tmp[0].value,
						plateNumber: _tmp[0].label
					};
				} else {
					return {};
				}
			}
		},
		methods: {
			// 车辆车牌号filter
			remoteMethod(query) {
				if(query !== "") {
					this.loading = true;
					setTimeout(() => {
						this.loading = false;
						this.options4 = this.list.filter(item => {
							return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
						});
					}, 200);
				} else {
					this.options4 = [];
				}
			},
			change(){
				this.$emit('input', this.carInfor.plateNumber||'');
			}
		}
	}
</script>

<style>
.input-with-select{
	width: 100%;
}
.input-with-select .el-input__inner{
	width: 100%;
	border: 1px solid #dcdfe6 !important;
	border-radius: 4px !important;
}
</style>